<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/shopcart.css">
    <link rel="stylesheet" href="../css/iconfont.css">
</head>

<body>
    <!-- top -->
    <div class="top">
        <div class="container clearfix">
            <div class="top-left fl">
                <!-- 位置 -->
                <p class="fl">
                    Hi，欢迎来九机！
                </p>
                <div class="login fl">
                    <a href="./login.html">登录 </a>
                </div>
                <div class="register fl">
                    <a href="./register.html">免费注册 </a>
                </div>

            </div>

            <div class="top-right fr">
                <a href="#" class="top-user">
                    个人中心
                    <i class="triangle"> </i>
                    <ul>
                        <li>我的订单 </li>
                        <li>我的积分 </li>
                        <li>我的试用</li>
                        <li>我的收藏</li>
                        <li>我的优惠券</li>
                        <li>我的维修</li>

                    </ul>
                </a>
                <a href="#">
                    <i class="icon vip"> </i> 会员俱乐部
                </a>
                <a href="#">帮助中心</a>
                <a href="#" class="top-app">
                    <i class="icon"></i> 客户端
                    <div class="download">
                        <div class="pic fl">
                            <img src="../imgs/appdown.png" width="100px" height="100px">
                            <p>扫描二维码下载</p>
                        </div>
                        <div class="versions fr">
                            <span href="#">Android</span>
                            <span href="#">iPhone</span>
                            <span href="#">触屏版</span>
                        </div>
                    </div>
                </a>
                <a href="#">企业采购</a>
                <a href="#">在线客服</a>
                <a href="#" class="sitemap">
                    网站导航
                    <i class="triangle"> </i>

                    <ul class="clearfix">
                        <li>
                            <h3>九机特色</h3>
                            <div class="site-map-list">
                                <span href="#">附近门店</span>
                                <span href="#">一手优品</span>
                                <span href="#">二手良品</span>
                                <span href="#">旧机回收</span>
                                <span href="#">预约维修</span>
                                <span href="#">九机小店</span>
                            </div>
                        </li>
                        <li>
                            <h3 class="purple">服务集市</h3>
                            <div class="site-map-list">
                                <span href="#">在线支付</span>
                                <span href="#">话费充值</span>
                                <span href="#">试用中心</span>
                                <span href="#">帮助中心</span>
                                <span href="#">九机服务</span>
                                <span href="#" class="huiyuan">
                                    会员俱乐部
                                    <i class="jiaobiao"></i>
                                </span>
                            </div>
                        </li>

                        <li>
                            <h3 class="light-green">更多精选</h3>
                            <div class="site-map-list">
                                <span href="">九机头条</span>

                            </div>
                        </li>
                        <li>
                            <h3 class="light-red">产品选择</h3>
                            <div class="site-map-list">
                                <span href="">手机</span>
                                <span href="">手机配件</span>
                                <span href="">电脑办公</span>
                                <span href="">时尚影音</span>
                                <span href="">智能家居</span>
                                <span href="">娱乐竞技</span>
                            </div>
                        </li>
                    </ul>
                </a>
                <a href="#" class="jubao">
                    <i class="icon"></i> 不良信息举报
                </a>
                <a href="#" class="top-phone">
                    <i class="icon"></i> 400-008-3939
                    <div class="top-free-phone">
                        <p>输入手机号码并<span>免费</span>拨打:</p>
                        <div class="clearfix">
                            <input type="text">
                            <button>拨打</button>
                        </div>

                    </div>

                </a>

            </div>

        </div>
    </div>
    <!-- header -->
    <div class="header container clearfix">
        <a href="../index.html" class="logo header-left"><img src="../imgs/shopcart-logo.png"></a>
        <div class="header-right clearfix">
            <dl class="dl-active">
                <dt>1</dt>
                <dd>我的购物车</dd>
            </dl>
            <dl>
                <dt>2</dt>
                <dd>填写核对订单</dd>
            </dl>
            <dl>
                <dt>3</dt>
                <dd>付款</dd>
            </dl>
        </div>

    </div>
    <!-- main -->
    <div class="main container">
        <div class="shop-cart-wrap">
            <div class="title clearfix">
                <div class="title-left">
                    全部商品 <span class="all-count" id="all-count"></span>
                </div>
                <div class="title-right">
                    已选<span class="order-count">0</span>件，合计(不含运费)
                    <span class="order-price">￥<i class="accounts">0</i></span>
                </div>
            </div>
            <div class="cart-list">
                <div class="list-title clearfix">
                    <div class="cart-check">
                        <input id="all-input" class="inputs all-inputs" type="checkbox" value="#f0544d" />全选
                        <label for="all-input"></label>
                    </div>
                    <ul class="cart-product clearfix">
                        <li>商品</li>
                        <li>单价(元)</li>
                        <li>优惠(元)</li>
                        <li>数量</li>
                        <li>小计(元)</li>
                        <li>操作</li>
                    </ul>
                </div>
                <ul class="shop-list content clearfix" id="shop-list">

                    <!-- <li>
                        <ul class="clearfix">
                            <li class="cart-check">
                                <input id="input1" class="inputs input-" type="checkbox" value="#f0544d" />
                                <label for="input1"></label>
                            </li>
                            <li class="shop-desc clearfix">
                                <div class="img-box"><img src="../imgs/shop1.jpg"></div>
                                <div class="text">
                                    <a class="shop-name">Apple iPhone 11 （A2223）全网通 绿色 64GB </a>
                                    <p class="discounts"><span>特价</span>该商品特价促销，不与会员优惠叠加</p>
                                    <a href="javascript:;" class="service"><img src="../imgs/baoxiu.png">特选服务</a>
                                </div>
                            </li>
                            <li class="price">5499.00</li>
                            <li class="dis-price">2.00</li>
                            <li class="btn">
                                <a href="javascript:;" class="minus">-</a>
                                <span class="count">1</span>
                                <a href="javascript:;" class="plus">+</a>
                            </li>
                            <li class="sum-price">5497.00</li>
                            <li class="operation">
                                <a href="javascript:;" class="move-like">移入收藏夹</a>
                                <a href="javascript:;" class="del">删除</a>
                            </li>
                        </ul>
                    </li> -->

                </ul>
                <div class="cart-bottom clearfix">
                    <div class="left">
                        <a href="javascript:;" class="cart-check">
                            <input id="all2-input" class="inputs all-inputs" type="checkbox" value="#f0544d" />全选
                            <label for="all2-input"></label>
                        </a>
                        <a href="javascript:;" class="all-del">删除</a>

                    </div>
                    <div class="right">
                        <span class="img-box"><img src="../imgs/shopcode.png"></span>
                        <span>已选商品 <b class="order-count">0</b> 件</span>
                        <span class="all-p">总计（不含运费）：<b>￥<i class="accounts">0</i></b></span>
                        <button id="goConfirm" class="button">结 算</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 购物车没有商品时的页面 -->
        <!-- <div class="shop-cart-clear">
            <img src="../imgs/shopcart.png">
            <p>购物车里还没有商品，快 <a href="index.html">去逛逛</a> 吧</p>
        </div> -->
        <!-- recommend -->
        <div class="recommend">
            <div class="recommend-title">为您优选</div>
            <div class="wrap">
                <div class="left-btn"><span class="iconfont icon-shangyige"></span></div>
                <div class="lb_on">
                    <ul class="shops" id="shops">
                        <!-- <li data-id="1" data-img="../imgs/recommend.jpg" data-desc="苹果 iPhone 11 硅胶 定制保护壳"
                            data-price="159">
                            <div class="img-box"><img src="../imgs/recommend.jpg"></div>
                            <p class="text">苹果 iPhone 11 硅胶 定制保护壳</p>
                            <p class="price">九机价：<b>￥159</b></p>
                            <button class="button">加入购物车</button>
                        </li> -->


                    </ul>
                </div>
                <div class="right-btn"><span class="iconfont icon-xiayige"></span></div>

            </div>
        </div>
        <!-- 尾部 -->

    </div>
    <div class="footer">
        <div class="promise container clearfix">
            <a href="" target="_blank">
                <dl class="clearfix">
                    <dt class="icon icon1"></dt>
                    <dd>
                        <h4>新九机 心生态</h4>
                        <p>全新九机 用心可见</p>
                    </dd>
                </dl>
            </a>
            <a href="" target="_blank">
                <dl class="clearfix">
                    <dt class="icon icon2"></dt>
                    <dd>
                        <h4>售假退一罚三</h4>
                        <p>我们承诺，只做正品</p>
                    </dd>
                </dl>
            </a>
            <a href="" target="_blank">
                <dl class="clearfix">
                    <dt class="icon icon3"></dt>
                    <dd>
                        <h4>1小时极速达</h4>
                        <p>自建物流，直达客户</p>
                    </dd>
                </dl>
            </a>
            <a href="" target="_blank">
                <dl class="clearfix">
                    <dt class="icon icon4"></dt>
                    <dd>
                        <h4>上门快修</h4>
                        <p>线上预约维修，在线评估故障</p>
                    </dd>
                </dl>
            </a>
            <a href="" target="_blank">
                <dl class="clearfix">
                    <dt class="icon icon5"></dt>
                    <dd>
                        <h4>门店保障</h4>
                        <p>实体购物，更加安心</p>
                    </dd>
                </dl>
            </a>
        </div>
        <div class="foot-help ">
            <div class="wrapper container clearfix">
                <dl>
                    <dt>新手指南</dt>
                    <dd>
                        <a href="">会员注册与使用</a>
                        <a href="">九机评测</a>
                        <a href="">积分介绍</a>
                    </dd>
                </dl>
                <dl>
                    <dt>付款方式</dt>
                    <dd>
                        <a href="">在线支付</a>
                        <a href="">分期介绍</a>
                        <a href="">退款介绍</a>
                    </dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd>
                        <a href="">到店自提</a>
                        <a href="">送货上门</a>
                        <a href="">快递运输</a>
                    </dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd>
                        <a href=" ">售后服务政策</a>
                        <a href=" ">维修质保政策</a>
                        <a href=" ">九机服务</a>
                    </dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <a href=" ">会员介绍</a>
                        <a href=" ">交易条款</a>
                        <a href=" ">常见问题解答</a>
                    </dd>
                </dl>
                <dl class=" foot-relation clearfix ">
                    <dt class=" icon code "></dt>
                    <dd class=" text ">
                        <h4>九机网官方微信</h4>
                        <p>扫描二维码，即刻调戏小九，更多精彩活动等着您哦！</p>
                    </dd>
                    <dd class=" wblink ">
                        <a rel=" nofollow " href=" " target=" _blank " class=" xinlang "><i class=" icon "></i>新浪微博</a>
                        <a rel=" nofollow " href=" " target=" _blank " class=" tengxun "><i class=" icon "></i>九机贴吧</a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- last最后 -->
    <div class="last_on">
        <div class="last container">
            <div class="last-nav">
                <a href="">常见问题</a>
                <i>|</i>
                <a href="">供应商申请</a>
                <i>|</i>
                <a href="">配送服务</a>
                <i>|</i>
                <a href="">招聘信息</a>
                <i>|</i>
                <a href="">关于我们</a>
                <i>|</i>
                <a href="">联系我们</a>
                <i>|</i>
                <a href="">投诉建议</a>
                <i>|</i>
                <a href="">地区报价</a>
                <i>|</i>
                <a href="">IT服务</a>
            </div>
            <div class="copy">

                <p>各门店营业时间：周一至周日 09:00-21:30 &nbsp;&nbsp;&nbsp;&nbsp; 全国服务热线：400-008-3939 &nbsp;&nbsp;0871-68393939 &nbsp;&nbsp;&nbsp;&nbsp; 工作时间：周一至周日 09:00-21:30</p>

                <p>网站ICP备案号：<a href="//www.miibeian.gov.cn/" target="_blank">滇ICP备06002001号</a> &nbsp;&nbsp;&nbsp;&nbsp; 电信业务经营许可证：滇B2-20180054号 &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53010202000261" target="_blank">滇公网安备 53010202000261号</a> &nbsp;&nbsp;&nbsp;&nbsp; </p>

                <p>Copyright © 2006 - 2019 九机网 All Rights Reserved</p>
                <p>云南九机信息技术有限公司版权所有</p>
            </div>
            <div class="bottom-link">
                <a href=""><img src="../imgs/bottom1.jpg"></a>
                <a href=""><img src="../imgs/bottom2.png"></a>
                <a href=""><img src="../imgs/bottom3.png"></a>
                <a href=""><img src="../imgs/bottom4.png"></a>
                <a href=""><img src="../imgs/bottom5.png"></a>
                <a href=""><img src="../imgs/bottom6.jpg"></a>
            </div>
        </div>
    </div>
    <script src="../js/jquery-1.12.4.js"></script>

    <script>
        //   渲染为您推荐 
        $.getJSON("http://localhost/jiuji/api/recommend.php", function(data) {
            var str = "";
            for (var i = 0; i < data.length; i++) {
                str += ` <li data-goodsid="${data[i].Id}"  data-img="${data[i].img}" data-price="${data[i].price}" data-name="${data[i].name}" data-disprice="${data[i].disprice}">
                            <div class="img-box"><img src="${data[i].img}"></div>
                            <p class="text">${data[i].name}</p>
                            <p class="price">九机价：<b>￥<span>${data[i].price}</span></b></p>
                            <button class="button" data-goodsid="${data[i].Id}">加入购物车</button>
                        </li>`
            }
            $(".recommend .shops").append(str)
        })
    </script>

    <script src="../js/shopcart.js"></script>
</body>

</html>